<template>
  <main>
    <h2>我是首页(测试导航守卫)</h2>
    <!-- router-link: 路由入口组件，它最终在页面上是a标签，但是它不会重新访问站点 -->
    <ul>
      <router-link :to="'/testa?name=' + name"><h3>A组件</h3></router-link>
      <router-link :to="'/testb?name=' + name"><h3>B组件</h3></router-link>
    </ul>
    name: <input v-model="name">
    <hr />
    <!-- 路由出口，用于展示路由出来的组件 -->
    <h2>路由出口</h2>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </main>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {
      name: ""
    }
  }
};
</script>
  
  <style>
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
</style>
